<template>
<div class=" publicBox" id="userListCss">


<div class="boxItem " id="publicSearch">
<el-form ref="form" :inline="true"  class="demo-form-inline">
<el-row>
       <el-form-item label="用户ID">
                 <el-input class="pubIpt200" v-model="idcard"  placeholder="请输入用户ID"></el-input>
       </el-form-item>
       <el-form-item label="用户姓名">
                 <el-input class="pubIpt200" v-model="username"  placeholder="请输入用户姓名"></el-input>
       </el-form-item>
       <el-form-item label="手机号码">
                 <el-input class="pubIpt200" v-model="mphone"  placeholder="请输入手机号码"></el-input>
       </el-form-item>
       <el-form-item>
                 <el-button class="pubBtnBlue" type="primary" @click="init">查询</el-button>
       </el-form-item>
</el-row>

<el-row>
       <el-form-item>
                 <el-button @click="addUser()" class="pubBtnGree140" type="primary">新建测试用户</el-button>
       </el-form-item>
</el-row>

</el-form>
</div>
          <public-table class="colum"
           @handleEdit="handleEdit" 
           @handleChange="handleChange"
           :columnDefs="columnDefs" 
           :tableData="tableData" 
           :order=false
           :btn="['delete','enable','see']"></public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import * as API from "@api/userControl.js"
export default {
  components: {
         publicTable
  },
  data() {
    return {
        input:"",
        columnDefs :[
            {headerName: '用户ID', field: 'id',width:120},
            {headerName: '用户类型', field: 'usertypename',width:120},
            {headerName: '昵称', field: 'nickname',width:120},
            {headerName: '姓名', field: 'name',width:120},
            {headerName: '性别', field: 'gendername',width:120},
            {headerName: '手机号码', field: 'mphone',width:120},
            {headerName: '地区', field: 'regionname',width:120},
            {headerName: '钱包余额', field: 'balance',width:90},
            {headerName: '奖励金余额', field: 'bounty',width:118},
            {headerName: '状态', field: 'statusname',width:100}
        ],
        tableData: [],
        pageNum:1,
        pageSize:100,
        idcard:null,
        username:null,
        mphone:null
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    handleEdit(row,flag){
      if(!flag){
      this.$router.push({path:"/platform/userControl/userListSee",query:{data:row}})
      return
      }
    },
    addUser(){
        this.$router.push({path:"/platform/userControl/userListEdit"})
    },
    async handleChange(index,row){   //状态改变
        if(index==1) row.status=2
        if(index==2) row.status=3
        await API.editusercontrolrApi(row).then(res=>{
          if(res.IsPositive){
            this.$message.success({message:"操作成功"})
            this.init()
          }else{
            this.$message.error({message:res.ErrorCode})
          }
        })
    },
    async init(){
      let params={page:this.pageNum,size:this.pageSize,id:this.idcard,name:this.username,mphone:this.mphone}
      let res = await API.getusercontrolrApi(params).then(res=>{
        if(res.IsPositive){
          this.tableData = res.Data
          console.log("res",res.Data)
        }else{
          this.$message.error({message:res.ErrorCode})
        }
      })
         
    }

  },
  created() {
      this.init()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
@import "../../styles/less/public.less";
</style>